/**
 * useRef()
 *    作用：与 createRef() 类似，会返回一个 包含有current属性的对象
 *
 *    语法：
 *      const ref = useRef(initialValue
 *
 *    应用场景：
 *      1. 获取DOM对象
 *      2. 获取组件实例对象
 *      3. 创建一个不会被修改的数据
 */

import { Form, Input, Button, FormInstance } from "antd";
import { useRef, useState, useEffect } from "react";

export default function App() {
  const box = useRef<HTMLParagraphElement>(null);
  const formRef = useRef<FormInstance>(null);

  const [count, setCount] = useState(1);

  let timer = useRef("");

  useEffect(() => {
    console.log("box", box.current);

    timer.current = setInterval(() => {
      console.log("setInterval");
    }, 1000);
  }, []);

  return (
    <div>
      <h1>useRef</h1>

      <Button
        onClick={() => {
          console.log("timer", timer);
          clearInterval(timer.current);
        }}
      >
        暂停
      </Button>
      <Button onClick={() => setCount((count) => count + 1)}>{count}</Button>

      <p ref={box}>Hello</p>
      <Button
        onClick={() => {
          console.log(formRef.current?.getFieldsValue());
        }}
      >
        获取 Form 表单的 values{" "}
      </Button>
      <hr />
      <Form ref={formRef}>
        <Form.Item name="name" label="姓名">
          <Input />
        </Form.Item>
      </Form>
    </div>
  );
}
